<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
      /* border: spacing 2px; */
      /* text-indent: initial; */
    }
    thead {
      background-color: #f5f5f5;
    }
    th,td {
      border: 1px solid #aaa;
      padding: 8px 12px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
   
  </table>
  <h2>总价格：¥<span class="total">0</span></h2>
  <script>
    window.onload = function () {
      
      // 1.从服务器获取数据 ajax/fetch
      var books = [
        {
          id: 1,
          name: '《算法导论》',
          date: '2006-09',
          price: 85.00,
          count: 3
        },
        {
          id: 2,
          name: '《UNIX编程艺术》',
          date: '2006-02',
          price: 59.00,
          count: 2
        },
        {
          id: 3,
          name: '《编程珠玑》',
          date: '2008-10',
          price: 39.00,
          count: 5
        },
        {
          id: 4,
          name: '《代码大全》',
          date: '2006-03',
          price: 128.00,
          count: 8
        }
      ]
      // 2.对数据展示
      // 到底通过html直接编写, 还是通过JavaScriptDOM操作创建元素
      // 1> 对于固定的, 直接通过html编写(能通过html编写, 尽量通过html直接编写)
      // 2> 对于哪些大量的数据, 有规律的数据, 可以通过JavaScript编写
      // var tbodyEl = document.querySelector("tbody") as HTMLDivElement
      var tbodyEl = document.querySelector("tbody")
      
      for (var book of books) {
        
        var trEl = document.createElement("tr")
        var keys = Object.keys(book)
        for (var key of keys) {
          var tdEl = document.createElement("td")
          if (key == "price") {
            tdEl.textContent = "¥" + book[key]
          } else {
            tdEl.textContent = book[key]
          }
          trEl.append(tdEl)
        }

        var deleteTd = document.createElement("td")
        var deleteButton = document.createElement("button")
        deleteButton.textContent = "删除"
        deleteTd.append(deleteButton)
        trEl.append(deleteTd)
        
        tbodyEl.append(trEl)
      }

      // 3.计算总价格
      getTotal()
      function getTotal() {
        var total = 0
        for (var book of books) {
          total += book.price * book.count
        }

        var totalEl = document.querySelector(".total")
        totalEl.textContent = total
      }

      //删除功能
      // var buttonsEl = document.querySelectorAll("button") as HTMLDivElement
      var buttonsEl = document.querySelectorAll("button")
      for(var i = 0; i < buttonsEl.length; i++) {
        buttonsEl[i].onclick = function () {
          var deleteRow = this.parentElement.parentElement
          var deleteIndex = deleteRow.sectionRowIndex
          deleteRow.remove()
          books.splice(deleteIndex,1)
          getTotal()
        }
      }
    }
  </script>
</body>
</html>